<script>
  export default {
    name: 'VwCol',
    props: {
      tag: {
        type: String,
        default: 'div'
      },
      span: {
        type: Number,
        default: 24
      },
      offset: {
        type: Number,
        default: 0
      },
      pull: {
        type: Number,
        default: 0
      },
      push: {
        type: Number,
        default: 0
      },
      xs: {
        type: [Number, Object],
        default: 0
      },
      sm: {
        type: [Number, Object],
        default: 0
      },
      md: {
        type: [Number, Object],
        default: 0
      },
      lg: {
        type: [Number, Object],
        default: 0
      },
      xl: {
        type: [Number, Object],
        default: 0
      }
    },
    computed: {
      getColGutterStyle() {
        if (!this.$parent.gutter) return ''
        const value = this.$parent.gutter / 2
        return {
          paddingLeft: value + 'px',
          paddingRight: value + 'px'
        }
      },
      getAllBootstrapClasses() {
        let allBootstrapClasses = []
        allBootstrapClasses.push(this.getBootstrapClass('xs'))
        allBootstrapClasses.push(this.getBootstrapClass('sm'))
        allBootstrapClasses.push(this.getBootstrapClass('md'))
        allBootstrapClasses.push(this.getBootstrapClass('lg'))
        allBootstrapClasses.push(this.getBootstrapClass('xl'))
        return allBootstrapClasses
      }
    },
    methods: {
      getBootstrapClass(className) {
        let bootstrapClass = []
        if (className) {
          const value = this[className]
          if (typeof value === 'number' && value) {
            bootstrapClass.push('vw-col-' + className + '-' + value)
          } else if (typeof value === 'object') {
            if (Object.hasOwnProperty.call(value, 'span') && value.span) {
              bootstrapClass.push('vw-col-' + className + value.span)
            }
            if (Object.hasOwnProperty.call(value, 'offest') && value.offset) {
              bootstrapClass.push(
                'vw-col-' + className + '-offest-' + value.offset
              )
            }
          }
        }
        return bootstrapClass
      }
    },
    render(h) {
      return h(
        this.tag,
        {
          style: this.getColGutterStyle,
          class: [
            'vw-col',
            'vw-col-' + this.span,
            this.pull ? 'vw-col-pull-' + this.pull : null,
            this.push ? 'vw-col-push-' + this.push : null,
            this.offset ? 'vw-col-offset-' + this.offset : null,
            this.getAllBootstrapClasses
          ]
        },
        this.$slots.default
      )
    }
  }
</script>

<style lang="scss">
  .vw-col {
    display: inline-block;
  }
  [class*='vw-col-'] {
    float: left;
    box-sizing: border-box;
  }

  // 生成 c-col-1 到 c-col-24
  @for $i from 1 through 24 {
    .vw-col-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }
    .vw-col-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }
    .vw-col-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .vw-col-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }

  @media only screen and (max-width: 767px) {
    @for $i from 1 through 24 {
      .vw-col-xs-#{$i} {
        width: (1 / 24 * $i * 100) * 1%;
      }
      .vw-col-xs-offset-#{$i} {
        margin-left: (1 / 24 * $i * 100) * 1%;
      }
    }
  }

  @media only screen and (min-width: 768px) {
    @for $i from 1 through 24 {
      .vw-col-sm-#{$i} {
        width: (1 / 24 * $i * 100) * 1%;
      }
      .vw-col-sm-offset-#{$i} {
        margin-left: (1 / 24 * $i * 100) * 1%;
      }
    }
  }

  @media only screen and (min-width: 992px) {
    @for $i from 1 through 24 {
      .vw-col-md-#{$i} {
        width: (1 / 24 * $i * 100) * 1%;
      }
      .vw-col-md-offset-#{$i} {
        margin-left: (1 / 24 * $i * 100) * 1%;
      }
    }
  }

  @media only screen and (min-width: 1200px) {
    @for $i from 1 through 24 {
      .vw-col-xl-#{$i} {
        width: (1 / 24 * $i * 100) * 1%;
      }
      .vw-col-xl-offset-#{$i} {
        margin-left: (1 / 24 * $i * 100) * 1%;
      }
    }
  }

  @media only screen and (min-width: 1920px) {
    @for $i from 1 through 24 {
      .vw-col-xl-#{$i} {
        width: (1 / 24 * $i * 100) * 1%;
      }
      .vw-col-xl-offset-#{$i} {
        margin-left: (1 / 24 * $i * 100) * 1%;
      }
    }
  }
</style>
